安徽商羽网络科技有限公司今天为大家讲解网站的前端开发和设计的时候关于显示按钮的应用，众所周知我们现在的显示按钮进行交互很复杂，为了更好地进行利用显示按钮今天5种方法进行HTML性质,具体的操作如下。

第一，发送效应

先看第一个，在默认状态下，纸飞机位于文本的左边。在鼠标移入时，纸飞机向右移再返回，这是一种常见的发送效果。首先看实际效果如何。

这种效果看起来很简单，只是一张图片的来回移动，但在实际操作过程中发现，普通hover只能实现一半的效果，变成了“无路可走”。其实这里运用的并非简单的过渡效果，而是动画效果。先用keyframes定义一个fly动画，然后把这个效果绑定到hover，这样就可以实现“左右横跳”。

编码如下：

第二，霓虹效应。

增加此效果会让按钮像霓虹灯一样亮起来，想要实现也很简单，在hover状态下，改变背景颜色，同时增加阴影效果即可。首先看一下实际效果：

第三，边界效应。

随着鼠标的移动，边框线就会出现一条一条的变化，这种效果可以说是将伪类、伪元素、定位、过渡等多个知识点结合在一起，相当复杂。为了达到这种效果，首先需要添加两个伪元素：before和：after，它们的大小都是0，以及一个透明的边框。在触发hover时，同时改变伪元素的宽度、高度、边框颜色，达到将每个边框单独显示的效果。与transition-delay属性一起使用(transition属性中的第四个值)，设置延迟时间，就可以达到transition效果。还可以改变延迟时间，以达到不同的效果。

第四，迁移效应。

希望一种颜色渐渐地覆盖另一种颜色，能学到下面的效果。这种效果的关键是，在设置背景渐变时，中间50%的状态下，同时设置两种不同的颜色，再通过改变背景的位置方式来实现变色。

5、圆角效应

对于块级别的元素模型，还有许多属性可以进一步细分，例如，普通的边框可以划分为四个单独设置，边距和上下边距也可以单独设置，同样，圆角属性也可以单独设置每个角的大小。

总结。

在前端设计方面，安徽商羽网络科技有限公司认为你不应该添加太多的疯狂效果，但是在网站上标记重要按钮总是值得的，当用户点击按钮时，这种神奇的效果会发生，用户一定会好奇会发生什么。